<template>
  <div class="editor">
    <mavon-editor
      ref="md"
      :subfield="true"
      placeholder="请输入文档内容..."
      :boxShadow="false"
      style="z-index:1;border: 1px solid #d9d9d9;height:50vh"
      v-model="content"
      :toolbars="toolbars"
      @change="changeData"
      @imgAdd="$imgAdd"
      @imgDel="$imgDel"
    />
  </div>
</template>

<script>
import * as myfunc from "../../commom/js/myfunc"
export default {
  data() {
    return {
      content: "",
      htmlcontent:'',
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      }
    };
  },
  props:{
    techtitle:{
      type:String,
      default:''
    },
    techtype:{
      type:String,
      default:''
    }
  },
  methods:{
    changeData(value, render){ 
      this.htmlcontent = render
      this.content = value
    },
    $imgAdd(pos, $file){
        // 第一步.将图片上传到服务器.
        var formdata = new FormData();
        formdata.append('image', $file);
        this.$http.post(this.serverurl+'file/uploadtech',formdata).then((result)=>{
          let url = this.serverurl+result.body.path+'/'+result.body.filename
          this.$refs.md.$img2Url(pos, url);
        })
    },
    $imgDel( $file){
      let arr = $file[0].split("/");
      let filename = arr[arr.length-1];
      this.$http.post(this.serverurl+"file/delete",{path:'tech',filename:filename}).then((result)=>{
        console.log(result)
      })
    },
    upload(){//文档上传
      let value = myfunc.getlocalstorage();
      let options = {
        uid:value._id,
        title:this.techtitle,
        container:this.htmlcontent,
        totalinfo:this.content,
        type:this.techtype,
        time:new Date()
      }
       this.$http.post(this.serverurl+'techology/add',options).then((result)=>{
        let info = result.body;
        if(info.status == 200){
          this.$notify({
            title: '成功',
            message: '发帖成功',
            type: 'success'
          });
          this.htmlcontent = "";
          this.$emit('myshowlist')
        }
      },(err)=>{
        console.log(err)
      })
    }
  },
  watch:{
    content(newval,oldval){
      // console.log(newval)
    }
  }
}
</script>

<style lang="less" scoped>
.editor{
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
</style>